<template>
	<view>
		<view class="list">
			<view class="listContent">
				<view class="public left">编号</view>
				<view class="public right">{{information.number}}</view>
			</view>
			<view class="listContent">
				<view class="public left">名称</view>
				<view class="public right">{{information.name}}</view>
			</view>
			<view class="listContent">
				<view class="public left">运营状态</view>
				<view v-if="information.type" class="public right">运营中</view>
				<view v-if="!information.type" class="public right">暂停运营</view>
			</view>
			<view class="listContent">
				<view class="public left">在线状态</view>
				<view v-if="information.type" class="public right">在线</view>
				<view v-if="!information.type" class="public right">不在线</view>
			</view>
			<view class="listContent">
				<view class="public left">上线时间</view>
				<view class="public right">{{information.time}}</view>
			</view>
			<view class="listContent">
				<view class="public left">具体位置</view>
				<view class="public right">
					<image src="@/static/image/rightkey.png"></image>
				</view>
			</view>
		</view>
		<view class="listContent" style="margin-top: 20rpx; border-bottom: 0 solid #ffffff;">
			<view class="public button" @click="showDiv()">开门补货</view>
			<view class="public button buttontype" style="margin-left: 32rpx;">阶段性确认</view>
			<view class="public doubt" style="margin-left: 32rpx;">
				<image class="doubtimg" src="@/static/image/doubt.png"></image>
			</view>
			<view class="public button buttontype" style="margin-left: 32rpx;">清空商品</view>
		</view>
		<view class="formList">
			<view class="listContent" style="width: 100%; padding-left: 0; padding-right: 0; border-bottom: 2rpx solid #a9c9d8">
				<view class="public subitem">隔层</view>
				<view class="public subitem">商品</view>
				<view class="public subitem">库存</view>
				<view class="public subitem">补货</view>
				<view class="public subitem">撤货</view>
			</view>
			<view class="listContent" v-for="(item,index) in commodity" :key="item.id" style="width: 100%; height: auto; padding: 0; border-bottom: 2rpx solid #a9c9d8">
				<view class="public subitem" style="height: auto; line-height: 100rpx;">{{item.interlayer}}</view>
				<view class="public subitem" style="height: auto; line-height: 0; padding-top: 10rpx; padding-bottom: 10rpx; border-left: 2rpx solid #a9c9d8;">
					<view class="commodityimg">
						<image :src="item.img"></image>
					</view>
					<view class="commoditytext">{{item.name}}</view>
				</view>
				<view class="public subitem" style="height: auto; line-height: 100rpx; padding-top: 10rpx; padding-bottom: 10rpx; position: relative; border-left: 2rpx solid #a9c9d8;">
					{{item.stock}}件
					<view class="edit">
						<image src="@/static/image/edit.png"></image>
					</view>
				</view>
				<view class="public subitem" style="height: auto; line-height: 100rpx; padding-top: 10rpx; padding-bottom: 10rpx; border-left: 2rpx solid #a9c9d8;">{{item.replenishment}}</view>
				<view class="public subitem" style="height: auto; line-height: 100rpx; padding-top: 10rpx; padding-bottom: 10rpx; border-left: 2rpx solid #a9c9d8;">{{item.withdrawal_goods}}</view>
			</view>
			<view :hidden="userFeedbackHidden" class="popup_content">
				<view class="popup_title">选择补货的柜子</view>
				<view class="clearfloat popup_textarea_item">
					<view class="clearfloat" style="width: 100%;">
						<view class="choice">
							<view class="public nochoice" @click="nochoice">全不选</view>
							<view class="public selectall" @click="selectall">全选</view>
						</view>
					</view>
					<view class="choicelist">
						<checkbox-group @change="checkboxChange">
							<label class="label" v-for="item in items" :key="item.value">
								<checkbox :value="item.value" :checked="item.checked" color="#32db0e" style="transform:scale(0.7)"/>{{item.name}}
							</label>
						</checkbox-group>
					</view>
				</view>
				<view class="buttBox">
					<view class="public cancel" @click="hideDiv()">取消</view>
					<view class="public determine" @click="determine()">确定</view>
				</view>
			</view>
			<view class="popup_overlay" :hidden="userFeedbackHidden" @click="hideDiv()"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userFeedbackHidden: true, // 默认隐藏
				                feedbackContent: '', // 用户反馈内容
				information:{},
				showModal: false,
				commodity: [
					{
						id:1,
						interlayer:101,
						img:'/static/image/logo.png',
						name: '雪碧 芬达 可乐',
						stock: 162,
						replenishment:0,
						withdrawal_goods:0
					},
					{
						id:2,
						interlayer:102,
						img:'/static/image/logo.png',
						name: '冰红茶',
						stock: 63,
						replenishment:0,
						withdrawal_goods:0
					},
					{
						id:3,
						interlayer:103,
						img:'/static/image/logo.png',
						name: '脉动',
						stock: 121,
						replenishment:0,
						withdrawal_goods:0
					},
					{
						id:4,
						interlayer:104,
						img:'/static/image/logo.png',
						name: '矿泉水',
						stock: 18,
						replenishment:0,
						withdrawal_goods:0
					}
				],
				items: [{
					value: '1',
					name: '1'
				},
				{
					value: '2',
					name: '2'
				},
				{
					value: '3',
					name: '3'
				},
				{
					value: '4',
					name: '4'
				},
				{
					value: '5',
					name: '5'
				},
				{
					value: '6',
					name: '6'
				}]
			}
		},
		onLoad: function (option) {
			var val = JSON.parse(option.val);
			this.information = val;
			uni.setNavigationBarTitle({
				title:val.name
			});
		},
		methods: {
			showDiv() {
				this.userFeedbackHidden = false;
				var items = this.items;
				items.forEach((item) => {
					this.$set(item,'checked',false)
				})
			},
			
			hideDiv() {
				this.userFeedbackHidden = true;
			},
			
			nochoice() {
				var items = this.items;
				items.forEach((item) => {
					this.$set(item,'checked',false)
				})
			},
			
			selectall() {
				var items = this.items;
				items.forEach((item) => {
					this.$set(item,'checked',true)
				})
			},
			
			checkboxChange: function (e) {
				var items = this.items,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if(values.includes(item.value)){
						this.$set(item,'checked',true)
					}else{
						this.$set(item,'checked',false)
					}
				}
			},
			
			determine() {
				var items = this.items;
				var determine = []
				items.forEach((item) => {
					if (item.checked) {
						determine.push(item)
					}
				})
				console.log('选中的货柜',determine)
				this.userFeedbackHidden = true;
			}
		}
	}
</script>

<style>
	.clearfloat:after{
	  display:block;
	  clear:both;
	  content:"";
	  visibility:hidden;
	  height:0
	}
	
	.clearfloat{
	  zoom:1
	}
	
	.list {
		width: 100%;
	}
	
	.listContent {
		width: 90%;
		height: 60rpx;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 5%;
		padding-right: 5%;
		border-bottom: 2rpx solid #d6d6d6;
		display: flex;
		flex-wrap: wrap;
	}
	
	.public {
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		flex-direction: column;
		font-size: 28rpx;
	}
	
	.left {
		width: 30%;
		height: 100%;
		color: #000000;
		font-weight: bold;
	}
	
	.right {
		width: 70%;
		height: 100%;
		color: #9d9d9d;
		text-align: right;
		position: relative;
	}
	
	.right image {
		width: 35rpx;
		height: 40rpx;
		position: absolute;
		top: 10rpx;
		right: 0;
	}
	
	.button {
		width: 25%;
		height: 60rpx;
		background-color: #1cac19;
		color: #ffffff;
		text-align: center;
		line-height: 60rpx;
		border-radius: 10rpx;
	}
	
	.buttontype {
		background-color: #9eda9c;
	}
	
	.doubt {
		width: 9%;
		height: 60rpx;
	}
	
	.doubtimg {
		width: 100%;
		height: 100%;
	}
	
	.subitem {
		width: 20%;
		height: 50rpx;
		font-size: 26rpx;
		text-align: center;
		line-height: 50rpx;
		color: #000000;
	}
	
	.commodityimg {
		width: 50rpx;
		height: 50rpx;
		margin: 0 auto;
	}
	
	.commodityimg image {
		width: 100%;
		height: 100%;
	}
	
	.commoditytext {
		width: 100%;
		height: auto;
		margin-top: 20rpx;
		line-height: 32rpx;
	}
	.edit {
		width: 30rpx;
		height: 30rpx;
		position: absolute;
		top:10rpx;
		right: 6rpx;
	}
	
	.edit image {
		width: 100%;
		height: 100%;
	}
	.popup_overlay {
		position: fixed;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 100%;
		background-color: black;
		z-index: 1;
		-moz-opacity: 0.8;
		opacity: .80;
		filter: alpha(opacity=88);
	}
 
	.popup_content {
		position: fixed;
		top: 50%;
		left: 50%;
		width: 540rpx;
		/* height: 570rpx; */
		margin-left: -270rpx;
		margin-top: -270rpx;
		/* border: 10px solid #FFFFFF; */
		background-color: #FFFFFF;
		z-index: 2;
		overflow: auto;
		border-radius: 20rpx;
	}
	
	.buttBox {
		width: 100%;
		height: 80rpx;
		display: flex;
		flex-wrap: wrap;
		font-size: 28rpx;
		border-top: 2rpx solid #d0d0d2;
		position: absolute;
		left: 0;
		bottom: 0;
	}
	
	.cancel {
		width: 50%;
		height: 100%;
		text-align: center;
		line-height: 80rpx;
		color: #000000;
	}
	
	.choicelist {
		width: 100%;
		border-top: 2rpx solid #d6d6d8;
	}
	
	.determine {
		width: 50%;
		height: 100%;
		text-align: center;
		line-height: 80rpx;
		color: #32db0e;
		border-left: 2rpx solid #d0d0d2;
	}
 
	.popup_title {
		padding-top: 40rpx;
		width: 100%;
		text-align: center;
		font-size: 32rpx;
	}
 
	.popup_textarea_item {
		padding-top: 5rpx;
		height: 250rpx;
		width: 90%;
		margin: 0 auto;
		margin-top: 30rpx;
	}
	
	.choice {
		width: 50%;
		display: flex;
		flex-wrap: wrap;
		font-size: 28rpx;
		float: right;
	}
	
	.nochoice {
		width: 50%;
		text-align: center;
		color: #89898b;
	}
	
	.selectall {
		width: 50%;
		text-align: center;
		color: #32db0e;
	}
	
	.label {
		display: inline-block;
		width: 119rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;
		border: 2rpx solid #d6d6d8;
	}
 
	.popup_textarea {
		width: 410rpx;
		font-size: 26rpx;
		margin-left: 20rpx;
	}
 
	.popup_button {
		color: white;
		background-color: #4399FC;
		border-radius: 20rpx;
	}
		
</style>
